<template>
  <div class="workflow-config">
    <el-tabs v-model="activeTab">
      <!-- JSON 编辑器 -->
      <el-tab-pane label="JSON编辑" name="json">
        <div class="json-editor">
          <monaco-editor
            v-model="jsonContent"
            language="json"
            :options="editorOptions"
            @change="handleJsonChange"
          />
        </div>
      </el-tab-pane>

      <!-- 参数配置 -->
      <el-tab-pane label="参数配置" name="params">
        <div class="params-config">
          <div v-for="group in template.layout.groups" :key="group.id" class="param-group">
            <h3>{{ group.title }}</h3>
            <div v-for="paramId in group.params" :key="paramId" class="param-item">
              <template v-if="getParam(paramId)">
                <div class="param-label">
                  {{ getParam(paramId).label }}
                  <el-tooltip v-if="getParam(paramId).description" :content="getParam(paramId).description">
                    <el-icon><InfoFilled /></el-icon>
                  </el-tooltip>
                </div>
                <div class="param-input">
                  <!-- 文本输入 -->
                  <el-input
                    v-if="getParam(paramId).type === 'text'"
                    v-model="paramValues[paramId]"
                    :placeholder="getParam(paramId).placeholder"
                  />
                  <!-- 数字输入 -->
                  <el-input-number
                    v-else-if="getParam(paramId).type === 'number'"
                    v-model="paramValues[paramId]"
                    :min="getParam(paramId).min"
                    :max="getParam(paramId).max"
                    :step="getParam(paramId).step"
                  />
                  <!-- 选择器 -->
                  <el-select
                    v-else-if="getParam(paramId).type === 'select'"
                    v-model="paramValues[paramId]"
                    :placeholder="getParam(paramId).placeholder"
                  >
                    <el-option
                      v-for="opt in getParam(paramId).options"
                      :key="opt.value"
                      :label="opt.label"
                      :value="opt.value"
                    />
                  </el-select>
                  <!-- 开关 -->
                  <el-switch
                    v-else-if="getParam(paramId).type === 'switch'"
                    v-model="paramValues[paramId]"
                  />
                </div>
              </template>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import MonacoEditor from './MonacoEditor.vue'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits(['update:modelValue'])

const activeTab = ref('json')
const jsonContent = ref(props.modelValue)
const paramValues = ref<Record<string, any>>({})

// 编辑器配置
const editorOptions = {
  theme: 'vs-dark',
  minimap: { enabled: false },
  automaticLayout: true,
  formatOnPaste: true,
  formatOnType: true
}

// 解析模板
const template = computed(() => {
  try {
    return JSON.parse(jsonContent.value)
  } catch {
    return { layout: { groups: [] }, params: [] }
  }
})

// 获取参数配置
const getParam = (paramId: string) => {
  return template.value.params?.find(p => p.id === paramId)
}

// 处理 JSON 变更
const handleJsonChange = (value: string) => {
  try {
    JSON.parse(value)
    jsonContent.value = value
    emit('update:modelValue', value)
  } catch (error) {
    console.error('Invalid JSON:', error)
  }
}

// 监听参数值变化
watch(paramValues, () => {
  try {
    const workflow = JSON.parse(jsonContent.value)
    // 更新工作流参数
    Object.entries(paramValues.value).forEach(([key, value]) => {
      const param = workflow.params.find(p => p.id === key)
      if (param) {
        param.default = value
      }
    })
    jsonContent.value = JSON.stringify(workflow, null, 2)
    emit('update:modelValue', jsonContent.value)
  } catch (error) {
    console.error('Failed to update workflow:', error)
  }
}, { deep: true })

// 监听输入值变化
watch(() => props.modelValue, (newValue) => {
  if (newValue !== jsonContent.value) {
    jsonContent.value = newValue
    try {
      const workflow = JSON.parse(newValue)
      // 更新参数值
      workflow.params?.forEach(param => {
        paramValues.value[param.id] = param.default
      })
    } catch (error) {
      console.error('Failed to parse workflow:', error)
    }
  }
}, { immediate: true })
</script>

<style scoped lang="scss">
.workflow-config {
  .json-editor {
    height: 500px;
  }

  .params-config {
    .param-group {
      margin-bottom: 24px;

      h3 {
        margin: 0 0 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
      }
    }

    .param-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .param-label {
        width: 200px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .param-input {
        flex: 1;
      }
    }
  }
}
</style> 